<template>
  <div
    v-loading="loading"
    v-if="showEnvironment">
    <create-sections
      class="wk-base-detail__section"
      title="外部环境">
      <wk-base-detail-section
        :list="environmentFields"
      />
      <div v-if="status == 1" slot="header" class="wk-base-detail__more" style="text-align: right; width: 100%;">
        <el-button slot="more" type="text" @click="commandSelect('edit')">编辑</el-button>
      </div>
    </create-sections>

    <form-add-dialog
      ref="formAdddialog"
      :title="formAddTitle"
      :form.sync="formAddForm"
      :rules="formAddRules"
      :fields="formAddFields"
      :visible.sync="formAddDialogShow"
      @pass="uploadReportInfo"
    />
  </div>
</template>

<script>
import {
  reportEnvironmentQueryAPI,
  reportEnvironmentUpdateAPI
} from '@/api/oa/reportEnvironment'

import CreateSections from '@/components/CreateSections'
import WkBaseDetailSection from '@/components/WkBaseDetail/WkBaseDetailSection'
import FormAddDialog from './FormAddDialog'

import { environmentModel } from '../model/report'
import { objDeepCopy } from '../../../../utils'

export default {
  name: 'ReportEnvironment',
  components: {
    CreateSections,
    WkBaseDetailSection,
    FormAddDialog
  },
  props: {
    id: [String, Number],
    status: [String, Number]
  },
  data() {
    return {
      loading: false,
      environmentInfo: {},
      environmentFields: [],
      // 弹窗添加
      formAddTitle: '',
      formAddForm: {},
      formAddRules: {},
      formAddFields: [],
      formAddDialogShow: false,
      showEnvironment: false
    }
  },

  computed: {},
  watch: {
    id: {
      handler() {
        this.getDetail()
      },
      immediate: true
    }
  },
  mounted() {
  },

  beforeDestroy() {},
  methods: {
    /**
     * 获取基础信息
     */
    getDetail() {
      this.loading = true
      reportEnvironmentQueryAPI(this.id)
        .then(res => {
          this.loading = false
          const data = res.data || []
          this.environmentInfo = data
          this.environmentFields = this.getCommonFieldListValue(data)
          this.showEnvironment = true
        }).catch(() => {
          this.loading = false
        })
    },

    /**
     *常规字段值
     */
    getCommonFieldListValue(data) {
      const list = []
      environmentModel.field.forEach(field => {
        const temp = {}
        temp.label = field.name
        temp.value = data[field.field]
        list.push(temp)
      })
      return list
    },

    /**
     * 提交数据
     */
    uploadReportInfo() {
      const param = objDeepCopy(this.formAddForm)
      param.reportContent = JSON.stringify(param.reportContent)
      reportEnvironmentUpdateAPI(param).then(res => {
        this.$message.success(`${this.formAddTitle}成功`)
        this.formAddDialogShow = false
        this.getDetail()
      }).catch(() => {
        this.formAddDialogShow = false
      })
    },

    /**
     * 编辑删除操作
     */
    commandSelect(command) {
      const data = this.environmentInfo
      if (command == 'edit') {
        this.formAddTitle = '编辑外部环境'
        this.formAddForm = objDeepCopy(data)
        this.formAddForm.month = data.targetYear + '-' + data.targetMonth
        this.batchId = data.batchId
        this.fileList = data.file || []
        this.formAddRules = environmentModel.rule
        this.formAddFields = environmentModel.field
        this.formAddDialogShow = true
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.base-add-button {
  width: 100%;
  margin: 10px 0;
  padding: 11px 12px;
}

.wk-base-detail-section + .wk-base-detail-section {
  border-top: 1px solid $xr-border-color-base;
}

.create-sections {
  /deep/ .create-sections-content {
    padding: 0 20px;
  }
}

.contract-files {
  width: 80%;
  margin: 20px 0 20px 10px;
}
</style>
